<script setup>
const props = defineProps({
  status: { type: String, default: 'pending' }, // pending | approved | rejected | draft
  size: { type: String, default: 'md' }, // sm | md
})

const map = {
  pending: { text: '待审批', color: 'var(--color-primary)' },
  approved: { text: '已通过', color: 'var(--color-success)' },
  rejected: { text: '已驳回', color: 'var(--color-danger)' },
  draft: { text: '草稿', color: 'var(--color-info)' },
  cancelled: { text: '已撤销', color: '#6b7280' },
  invalid: { text: '无效', color: '#6b7280' },
}

const info = map[props.status] || map.pending
</script>

<template>
  <span class="status-tag" :class="[`size-${size}`]" :style="{ background: info.color }">{{
    info.text
  }}</span>
</template>

<style scoped>
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.size-sm {
  font-size: 12px;
  padding: 2px 8px;
}
.size-md {
  font-size: 13px;
}
</style>
